<template>
  <div class="loginCont" @keydown="enterFn($event)" :style="'height:'+docheight+'px'">
    <video muted autoplay loop src="static/video/logoVideo.mp4"></video>
    <div class="formMask">
      <div class="maskTop">
        <h1>同橙优享-家政管理后台</h1>
        <h3>Local bird agent background management system</h3>
      </div>
      <div class="formCont">
        <div class="formLogo">
          <img src="static/img/logo.png">
        </div>
        <div class="navCont">
          <div @click="navFn(item,index)" :class="item.active?'navItem navActive':'navItem'" :key="index" v-for="(item,index) in navArr">{{ item.name }}</div>
        </div>
        <div class="formEnter" v-if="navId==0">
          <div class="inputCont">
            <div class="inputName">Phone(手机号)</div>
            <div class="inputVal">
              <el-input v-model="account" type="text" placeholder="Enter your Phone"></el-input>
            </div>
          </div>
          <div class="inputCont">
            <div class="inputName">Password(密码)</div>
            <div class="inputVal">
              <el-input v-model="password" type="password" placeholder="Enter your password"></el-input>
            </div>
          </div>
          <btn style="width:100%" value="登录" @click="loginFn"></btn>
        </div>
        <div class="formEnter" v-if="navId==1">
          <div class="inputCont">
            <div class="inputName">Phone(手机号)</div>
            <div class="inputVal">
              <el-input class="phoneInput" type="number" v-model="account" placeholder="Enter your Phone"></el-input>
              <btn :disabled="isGetting||!$converData.checkPhone(this.account)" style="margin-left:10px" @click="getCode" :value="codeText"></btn>
            </div>
          </div>
          <div class="inputCont">
            <div class="inputName">CodeNumber(验证码)</div>
            <div class="inputVal">
              <el-input v-model="code" type="number" placeholder="Enter your CodeNumber"></el-input>
            </div>
          </div>
          <btn style="width:100%;font-size: 14px;" value="登录" @click="loginFn"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import btn from '@/components/public/btn.vue'
import {login,Sendsms} from "@/http/api";

export default {
      components: {btn},
      data() {
          return {
            navArr:[
              {name:'密码登录',active:true},
              {name:'验证码登录',active:false},
            ],
            navId:0,
            account:'',
            password:'',
            code:'',
            codeText:'获取验证码',
            isGetting:false,
          }
      },
      props: {},
      methods: {
        getCode(){
            let result = this.$converData.checkPhone(this.account)
            if(!this.isGetting&&result){
                this.isGetting = true
                let timer= null
                let num = 60
                this.getSendsms(this.account)
                timer = setInterval(() => {
                    if(num > 0){
                        num--
                        this.codeText = num+'s后重试'
                    }else{
                        this.codeText ='重新获取'
                        this.isGetting = false
                        clearInterval(timer)
                    }
                }, 1000)
            }
        },
        getSendsms(mobile){
          return false
            let data = {
                mobile:mobile,
                type:1,
            }
            Sendsms(data).then((res) => {
                if(res.data.code==1){
                  this.$message({
                    message: '获取成功',
                    type: 'success'
                  });
                }else{
                  this.$message(res.data.msg);
                }
            }).catch((err)=>{
              this.$message('网络请求超时');
            })
        },
        navFn(item,index){
          for(let i = 0; i <this.navArr.length;i++){
            this.navArr[i].active = false
          }
          this.navId = index
          item.active = true
        },
        enterFn(e){
          if(e.keyCode==13){
            if(this.navId==0){
              this.loginFn()
            }
          }
        },
        loginFn(){
          if(this.account==''){
            this.$message('请输入手机号');
            return false
          }else if(this.navId==0&&this.password==''){
            this.$message('请输入密码');
            return false
          }else if(!this.$converData.checkPhone(this.account)){
            this.$message('手机号格式不正确');
            return false
          }else if(this.navId==1&&this.code.length!=4){
            this.$message('验证码不正确');
            return false
          }
          var data = {
            // admin_username:this.account,
            admin_username:this.account,
            admin_password:this.password,
          }
          login(data).then((res)=>{
            if(res.data.code==1){
              localStorage.setItem('token',res.data.data.token)
              localStorage.setItem('real_name',this.account)
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              setTimeout(()=>{
                this.$router.push({path:'/userCenterInfo'})
              },1500)
            }else{
              this.$message(res.data.msg);
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted() {
      },
      created() {
        if(localStorage.getItem('real_name')){
          this.account = localStorage.getItem('real_name')
        }
      },
  }
</script>

<style scoped lang="less">
.loginCont{
  width: 100%;
  overflow: hidden;
  position: relative;
  video{
    width: 100%;
  }
  .formMask{
    width: 100%;
    position: absolute;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    .maskTop{
      text-align: center;
      margin-top: 70px;
      color: white;
      margin-bottom: 100px;
    }
    .formCont{
      background-color: #fff;
      width:550px;
      margin: 0 auto;
      padding: 0 50px 30px;
      box-sizing: border-box;
      border-radius: 10px;
      .formLogo{
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        top: -60px;
        margin: 0 auto;
        overflow: hidden;
        img{
          width: 100%;
          border-radius: 50%;
        }
      }
      .navCont{
        margin-top: -60px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        .navItem{
          width: 50%;
          font-size: 16px;
          border-bottom: 1px solid #DCDFE6;
          padding-bottom: 20px;
        }
        .navItem:hover{
          color: #3273f6;
          cursor: pointer;
        }
        .navActive{
          color: #3273f6;
          border-bottom: 1px solid #3273f6;
        }
      }
      .formEnter{
        margin-top: 30px;
        .inputCont{
          width: 100%;
          margin-bottom: 25px;
          .inputName{
            margin-bottom: 10px;
          }
          .inputVal{
            display: flex;
            .phoneInput{
              width: 50px;
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
